<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				我的收藏（{{list.length}}）
			</view>
			<view class="right" @click="onManage">
				管理
			</view>
		</view>

		<view class="list">
			<view class="listItem flex" v-for="item in list" :key="item.id" @click="goGoodsDetails(item)">
				<image class="deleteIcon" src="http://www.bobei.shop/static/third/deleteIcon2.png" mode="" v-if="manage" @click.stop="onDeleteIcon(item)"></image>
				<image class="thumb" :src="item.goods ? item.goods.thumbUrl : ''" mode=""></image>
				<view class="listItemR" v-if="item.goods">
					<view class="goodsTitle oneHidden">
						{{ item.goods.title }}
					</view>
					<view class="price flex-row">
						<view class="priceL">
							¥{{ item.goods.marketprice }}
						</view>
						<!-- <view class="priceR">
							已有000人收藏
						</view> -->
					</view>

					<scroll-view class="signScroll" :scroll-x="true">
						<view class="sign flex">
							<view class="signItem flex-center" v-for="(item2,index2) in item.goods.labelname" :key="index2">
								{{ item2.label }}
							</view>
						</view>
					</scroll-view>

					<view class="btnBox flex">
						<button :plain="true" class="btn">立即购买</button>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="listStatus"></uni-load-more>
		
		<!-- 确定删除收藏 弹窗-->
		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>
	</view>
</template>

<script>
	import determinedPopover from "../components/determined-popover/determined-popover.vue";
	export default {
		components: {
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",
				
				deleteId: "",
				
				statusBarHeight: "",
				manage: false,

				list: [],
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;

			this.list = [];
			this.form.page = 1;
			this.form.lastId = 0;
			this.loading = false;
			this.finished = false;
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			}
		},
		methods: {
			onDeleteIcon(param) {
				this.deleteId = param.goodsId;
				this.deterTitle = "提示";
				this.deterContent = "确定删除该收藏？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 2003,
					data: {
						goods_id: this.deleteId,
					}
				}).then(res => {
					this.determinedShow = false;
					uni.showToast({
						title: '取消成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						this.refresh();
					}, 1000)
							
				})
			},
			
			onManage() {
				this.manage = !this.manage;
			},
			


			refresh() {
				this.list = [];
				this.form.page = 1;
				this.form.lastId = 0;
				this.loading = false;
				this.finished = false;
				this.getList();
			},
			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					url: "/portal/Shop",
					module: 'Goods',
					interface: 2002,
					data: this.form,
				}).then(res => {
					// console.log(res, "收藏商品列表");
					this.list = this.list.concat(res.list);
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			goGoodsDetails(param) {
				uni.navigateTo({
					url: '/home/goodsDetails?id=' + param.goodsId
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		line-height: 1.2;

		.topHead {
			background-color: #ffffff;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;



			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.right {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}

	.list {
		padding: 24rpx 30rpx 0;

		.listItem {
			width: 100%;
			height: 220rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);
			position: relative;
			margin-bottom: 30rpx;

			.deleteIcon {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				z-index: 1;
			}

			.thumb {
				width: 240rpx;
				height: 220rpx;
				border-radius: 24rpx 0 0 24rpx;
			}

			.listItemR {
				width: 418rpx;
				padding-left: 18rpx;
				padding-top: 20rpx;

				.goodsTitle {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.price {
					margin-top: 16rpx;

					.priceL {
						font-size: 24rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #F2615F;
					}

					.priceR {
						margin-left: 20rpx;
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.signScroll {
					width: 418rpx;
				}

				.sign {
					width: 418rpx;
					padding-left: 6rpx;
					overflow-x: auto;
					margin-top: 16rpx;


					.signItem {
						font-size: 10rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: normal;
						color: #DA93A5;
						background: #FCEEF3;
						border-radius: 5rpx 5rpx 5rpx 5rpx;
						border: 2rpx solid #F2615F;
						margin-right: 10rpx;
						height: 28rpx;
					}

					.signItem:nth-last-of-type(1) {
						margin-right: 0;
					}
				}

				.btnBox {
					justify-content: flex-end;
					margin-top: 16rpx;

					.btn {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						width: 116rpx;
						height: 40rpx;
						background: #F2615F;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						padding: 0;
						margin: 0;
						border: none;
					}
				}
			}
		}
	}
</style>
